<template>
    <!-- <div>封堵白名单</div> -->
    <a-row>
      <a-col>
        <a-card :bordered="false" style="margin-bottom: 10px">
          <!-- 查询区域 -->
          <div class="search-wrapper-btn">
              <a-button type="link" @click="show = !show">
                <span v-if="!show">展开
                  <a-icon type="down" />
                </span>
                <span v-else>收起
                  <a-icon type="up" />
                </span>
              </a-button>
            </div>
          <div class="table-page-search-wrapper">
            <a-form-model ref="ruleForm" :model="pageFilter" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-row style="display:flex">
                <a-col :span="6">
                <a-form-model-item label="上报主题" >
                    <a-input placeholder="请输入任务名称" v-model="pageFilter.reportSubject"/>
                </a-form-model-item>
              </a-col>
                <!-- <a-col :span="6">
                <a-form-model-item label="诈骗类型" style="margin-left:0px">
                  <a-select style="width:100%" v-model="pageFilter.fraudType">
                    <a-select-option v-for="(item, key) in fraud_typeArr" :key="key" :value="item.value">{{
                      item.title
                    }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
                </a-col> -->
                <a-col :span="6">
                <a-form-model-item label="上报状态" style="margin-left:0px">
                  <a-select style="width:100%" v-model="pageFilter.reportStatus">
                    <a-select-option v-for="(item, key) in reportStatus" :key="key" :value="item.value">{{
                      item.title
                    }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
                  <a-col :span="6" style="margin-left:0px">
                    <a-space :size="6">
                      <a-button type="primary" @click="onQuery" icon="search">查询</a-button>
                      <a-button @click="onResetForm" icon="reload">重置</a-button>
                    </a-space>
                  </a-col>   
              </a-row>
              <a-col :span="6">
                <a-form-model-item label="上报时间"  v-if="show">
                    <a-range-picker v-model="pageFilter.time" format="YYYY-MM-DD HH:MM:SS"
              valueFormat="YYYY-MM-DD HH:MM:SS"/>
                </a-form-model-item>
              </a-col>
            </a-form-model>
          </div>
        </a-card>
        <a-card :bordered="false">
          <div>
            <a-button type="primary" @click="Add" style="margin-right:10px">上报</a-button>
            <a-button type="danger" @click="onDelete" style="margin-right:10px" ghost>删除</a-button>
            <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="true" :loading="loading"
              :columns="columns" :dataSource="pageData" @selectedRowKey="onSelectedRow" @change="onTableChange">
              <template slot="action" slot-scope="text,record">
                    <a-button type="link" @click="Edit(record)">编辑</a-button>
                    <a-button type="link" @click="Details(record)">详情</a-button>
              </template>
              <!-- <template slot="fraudType" slot-scope="text">
                    <span> {{ aaa(text) }}</span>
              </template> -->
            </z-table>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </template>
  <script>
  import { pageBlockingWebsiteReport,delBlockingWebsiteReport } from '@/api/plugging/Police'
  import { getDictItemsFromCache } from '@/api/api'
  export default {
    mounted () {
    this.onQuery()
    },
    data () {
      return {
        reportStatus:[
          {
            title:'待上报',
            value:'0'
          },
          {
            title:'已上报',
            value:'1'
          },
        ],
        idsDTO:{
          ids:[]
        },
        fraud_typeArr:getDictItemsFromCache('case_fraud_type'),
        show:false,
        labelCol: { span: 5 },
        wrapperCol: { span: 16 },
        loading: false,
        pageFilter: {
          pageNo: 1,
          pageSize: 10,
        },
        pageData: {
  
        },
        columns:[
          {
            title: '序号',
            dataIndex: 'order',
            width: 60,
            align: 'center',
            customRender: (text, record, index) =>
              `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          },
          {
            title: '上报编号',
            dataIndex: 'reportNo',
            align: 'center',
          },
          {
            title: '上报主题',
            dataIndex: 'reportSubject',
            align: 'center',
          },
          // {
          //   title: '诈骗类型',
          //   dataIndex: 'fraudType',
          //   align: 'center',
          //   scopedSlots: { customRender: 'fraudType' },
          // },
          {
            title: '上报状态',
            dataIndex: 'reportStatus',
            align: 'center',
            customRender: text => `${text==0?'待上报':text == 1?'已上报':''}`
          },
          {
            title: '上报人',
            dataIndex: 'reportPerson',
            align: 'center',
          },
          {
            title: '上报时间',
            dataIndex: 'reportTime',
            align: 'center',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' },
          },
          
        ]
      }
    },
    methods: {
      // aaa(text){
      //   return this.fraud_typeArr[text-1].text
      // },
      Add(){
        this.$router.push({
        path: '/plugging/police/InvolvingFraud/Add',
        query: {}
      })
      },
      Edit(record){
        this.$router.push({
        path: '/plugging/police/InvolvingFraud/Edit',
        query: {
          id:record.id
        }
      })
      },
      Details(record){
        this.$router.push({
        path: '/plugging/police/InvolvingFraud/Details',
        query: {
          type:'Details',
          id:record.id
        }
      })
      },
      onQuery() {
        this.pageFilter.pageNo = 1
        this.refreshTable()
      },
      //重置
      onResetForm() {
        console.log(this.pageFilter);
        this.pageFilter = {
          pageNo: 1,
          pageSize: 10,
        }
        console.log(this.pageFilter);
        this.refreshTable()
      },
      onSelectedRow(keys) {
        this.idsDTO.ids = keys
        this.selectKeys = keys
        this.isDisabled = keys.length > 0 ? false : true
      },
      onTableChange(pagination, pageFilter, sorter) {
        let keyMap = { currentPage: 'pageNo' }
        let paginations = Object.keys(pagination).reduce((newData, key) => {
          let newKey = keyMap[key] || key
          newData[newKey] = pagination[key]
          return newData
        }, {})
        this.pageFilter = Object.assign({}, this.pageFilter, paginations)
        this.refreshTable()
      },
      refreshTable() {
      this.loading = true
      pageBlockingWebsiteReport(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          console.log(this.pageData);
          this.loading = false
        } else {
          this.$message.warn(res.message)
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onDelete() {
          let ids = this.idsDTO
          let doDelete = () => {
            delBlockingWebsiteReport(ids).then( res => {
                if (res.success) {
                  this.$message.success(res.message)
                  this.onQuery()
                  this.$refs.table.onClearRowKeys()
                } else {
                  this.$message.success(res.message)
                  this.loading = false
                }
                })
                .catch((e) => {
                  this.loading = false
                  this.$message.warn('请求失败！')
                })
                
          }
          this.$confirm({
          title: `是否确定删除对应的记录`,
          okText: "确定",
          okType: "danger",
          cancelText: "取消",
          async onOk() {
            doDelete()
          },
          onCancel(){
          }
        });
      },
    }
  }
  </script>
  
  <style lang="less" scoped>
  .search-wrapper-btn {
    position: absolute;
    right: 8%;
    top: 22px;
    z-index: 100;
  }
  </style>